<template>
  <div class="top-bar">
    <div class="logo">
        <img src="@/assets/images/留言墙.svg" class="logo-img">
        <p class="logo-name">留言墙</p>
    </div>
    <div class="menu">
        <lg-button :nom="id==0?'cprimary':'csecondary'" class="menu-message" @click="changeWall(0)">留言墙</lg-button>
        <lg-button :nom="id==1?'cprimary':'csecondary'" class="meun-photo" @click="changeWall(1)">照片墙</lg-button>
    </div>
    <div class="user">
        <div class="user-head"></div>
    </div>
  </div>
</template>

<script>
import LgButton from './LgButton.vue'
export default {
    data(){
        return {

        }
    },
    components:{
        LgButton
    },
    computed:{
        id(){
            return this.$route.query.id;
        }
    },
    methods:{
        //切换顶部导航栏（留言墙照片墙的切换）
        changeWall(e){
            this.$router.push({
                query:{id:e}
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.top-bar{
    width:100%;
    height: 52px;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index:9999;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;


    .logo{
        display: flex;
        align-items: center;
        width: 200px;
        .logo-name{
            font-size:@size-20;
            color:@gray-1;
            font-weight: 600;
            padding-left: 10px;
        }
        .logo-img{
            width: 40px;
        }
    }
}
.menu{
    .menu-message{
        margin-right: 24px;

    }
}
.user{
    width: 200px;
    .user-head{
        float: right;
        border-radius:50%;
        height: 36px;
        width: 36px;
        background-image:linear-gradient(180deg,#7BE7FF 2%,#1EB5E2) ;
    }
}

</style>